<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333333" :fixed="true" :padding="false" :border="true" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">消息</text>
		</uni-nav-bar>
		<view class="body mt20 bottom-ios">
			<EmptyContent v-if="!messageList[0]" top="160rpx" text="暂无消息" img="qsy_zwxx" @refresh="getUnreadMessage"></EmptyContent>
			<view class="message-list flex-c" v-else>
				<view class="message flex-r" v-for="(message, index) in messageList" :key="index">
					<view class="message-user" @tap="goExpertHome(message)">
						<lazy-image class="inheritwh border-round" :src="message.avatar+'?imageView2/1/w/100/h/100/q/50'" :type="message.userType" fit="cover"></lazy-image>
					</view>
					<view class="message-info flex-c" @tap="goDetail(message)">
						<text class="info-nickname text-secondary">{{message.nickname}}</text>
						<view class="info-content text-regular mt20">
							<template v-if="message.action == 'like'">
								<image class="support-icon" src="@/public/images/bar/dz.png" mode="aspectFit"></image>
							</template>
							<template v-else-if="message.action == 'vote'">
								<text>{{message.nickname}}参与了</text><text class="color-blue">{{message.title}}</text><text>的投票</text>
							</template>
							<template v-else-if="message.content.indexOf('回复'+user.nickname+':') == 0">
								<text class="reply-name">回复{{user.nickname}}：</text>
								<text>{{message.content.replace('回复'+user.nickname+':', '')}}</text>
							</template>
							<template v-else>
								<text>{{message.content}}</text>
							</template>
						</view>
						<uni-dateformat class="text-info color-grey mt20" :date="message.createTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
						<view class="info-title text-mini mt20" v-if="message.title">
							<text class="color-blue" v-if="message.type == 6 || message.type == 7">{{message.type == 6 ? '话题帖' : '投票帖'}}</text>
							<text>{{message.title}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list-end flex-r mt20 mb20" v-if="isEnd && messageList[0]">
				<text>已经到底啦～</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [],
				isEnd: false
			};
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			
			this.getUnreadMessage()
		},
		onReachBottom() {
			if(!this.isEnd){
				this.getUnreadMessage()
			}
		},
		methods: {
			
			//查询未读消息列表
			getUnreadMessage() {
				if(this.$store.state.isLogin){
					this.$http.get({
						url: '/api/notify/unread/list'
					}).then(data => {
						console.log('unread', data);
						if(data.success){
							if(data.result[0]){
								this.messageList.push(...data.result)
							}else{
								this.isEnd = true
							}
							//更新未读数量
							this.$store.dispatch('updateBarNotice').then(num => {
								this.isEnd = num === 0
							});
						}else{
							uni.showToast({
								title: data.message || '数据加载失败',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err);
					})
				}
				
			},
			//打开专家主页
			goExpertHome(message) {
				this.$CHS.goExpertHome(message.userId, message.userType, message.type)
			},
			//跳转详情页面
			goDetail(message){
				if(message.type == 2){
					this.$CHS.goShareDetail(message.bizId)
				}else if(message.type == 6 || message.type == 7){
					this.$CHS.goDiscussDetail(message.bizId)
				}else if(message.type == 1){
					this.$CHS.goArticleDetail(message.bizId)
				}else if(message.type == 99){
					this.$CHS.goArticleDetail(message.bizId, {type: 'user'})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body{
		.message-list{
			background-color: #fff;
			.message{
				padding: 20rpx;
				border-bottom: 1rpx solid #ededed;
				.message-user{
					width: 64rpx;
					height: 64rpx;
					margin-right: 20rpx;
				}
				.message-info{
					flex: 1;
					.info-nickname{
						color: #5977B3;
					}
					.info-content{
						max-width: 626rpx;
						font-weight: 500;
						text{
							line-height: 42rpx;
						}
						.reply-name{
							color: #1F4799;
						}
						.support-icon{
							width: 32rpx;
							height: 32rpx;
						}
					}
					.info-title{
						background: #F2F5FA;
						padding: 14rpx 20rpx;
						width: 626rpx;
						box-sizing: border-box;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #666;
						.color-blue{
							margin-right: 8rpx;
						}
					}
				}
			}
			.message:last-child{
				border-bottom: none;
			}
		}
	}
</style>
